<template>
  <div>
    <el-row type="flex" justify="end">
      <el-row>
        <el-select
          v-model="year"
          size="small"
          style="width:110px; margin: 0 5px"
          @change="dateChange"
        >
          <el-option
            v-for="item in yearList"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
        <el-select
          v-model="month"
          size="small"
          style="width:110px; margin: 0 5px"
          @change="dateChange"
        >
          <el-option
            v-for="item in 12"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-row>
    </el-row>
    <el-calendar v-model="value">
      <template v-slot:dateCell="{date, data}">
        <span>{{ data.day | getDay }}</span>
        <span v-if="isWeek(date)" class="rest">休</span>
      </template>
    </el-calendar>
  </div>
</template>
<script>
export default {
  filters: {
    getDay(value) {
      const day = value.split('-')[2]
      return day.startsWith('0') ? day.substr(1) : day
    }
  },
  data() {
    return {
      value: new Date(),
      yearList: [],
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1
    };
  },
  created() {
    this.yearList = Array.from(Array(10), function(value, index) {
      return index + new Date().getFullYear() - 5;
    });
    console.log(this.value);
  },
  methods: {
    isWeek(value) {
      return value.getDay() === 6 || value.getDay() === 0
    },
    dateChange() {
      this.value = new Date(`${this.year}-${this.month}`);
    }
  }
};
</script>
<style scoped>
.el-calendar-day {
  height:  auto;
 }
.rest {
    display: inline-block;
    font-size: 10px;
    width:18px;
    height:18px;
    line-height: 18px;
    text-align: center;
    background-color:coral;
    border-radius: 50%;
    color: #fff;
    margin-left: 10px
}
</style>
